<!DOCTYPE html>
<html>

	<head>
		<title>Stone'Blog</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/aos.css">
		<link rel="stylesheet" href="css/swipeSlider.css">
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/jQuery-face-cursor.js"></script>
		<script type="text/javascript" src="js/dark_oben.js"></script>
		<script type="text/javascript" src="js/aos.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/stone.css" />
		<style>
			.test {
				height: 100%;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				background-image: url(images/dark.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			
			.test_shadow {
				height: 100%;
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				background-image: url(images/dark_shadow.png);
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
			
			.swiper-container {
				width: 100%;
				padding-top: 50px;
				padding-bottom: 50px;
			}
			
			.swiper-slide {
				background-position: center;
				background-size: cover;
				width: 300px;
				height: 300px;
				border-radius: 4px;
				-webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
				box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
			}
			
			.buyNowButton {
				position: fixed;
				width: 250px;
				right: 20px;
				bottom: 20px;
				background-color: #29292e;
				padding: 6px 7px;
				border-radius: 50px;
				-webkit-border-radius: 50px;
				-moz-border-radius: 50px;
				-o-border-radius: 50px;
				z-index: 5;
			}
			
			.envatoLogo {
				width: 40px;
				height: 40px;
				overflow: hidden;
				float: left;
				display: inline-block;
				margin-right: 15px;
			}
			
			.envatoLogo img {
				width: 100%;
				overflow: hidden;
			}
			
			.buyNowText {
				line-height: 40px;
				float: left;
				font-weight: 600;
				font-size: 14px;
				font-family: "Raleway", sans-serif;
				text-transform: uppercase;
			}
			
			.buyNowText a {
				text-decoration: none;
				color: #ffffff;
			}
		</style>
		<style type="text/css">
			.tabbar {
				height: 80px;
				background-color: transparent;
				box-shadow: 0px 2px 5px #000;
				align-items: center;
				padding-right: 20px;
			}

			.tabbar_item {
				width: 50px;
				margin: 0px 20px;
				box-sizing: border-box;
				color: white;
			}
		</style>
	</head>

	<body>
		<div class="container" data-parallax-axis="both" data-parallax-scope="global" data-parallax-detect="mouseover">
			<div class="tabbar flex right">
				<div class="tabbar_item flex">技术</div>
				<div class="tabbar_item flex">笔记</div>
			</div>
			<div class="test fulminating" data-parallax-depth="10"></div>
			<div class="test_shadow fulminating" data-parallax-depth="6"></div>
			<div class="section_container">
				<div class="container_area">
					<div class="container_label curs">Stone'Blog</div>
					<div class="butons_group">
						<div class="butons">
							<input type="submit" name="" value="Sign In" class="login_buton">
						</div>
						<div class="butons">
							<input type="submit" name="" value="Register" class="register_buton">
						</div>
					</div>
					<div class="user_label">Last Registered Members</div>
					<div class="last_user ">
						<div class="user curs"><img src="images/author.jpg"></div>
					</div>
					<div class="icon_area">
						<div class="icon_scroll scrollFade"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="mobile_section">
			<div class="landing-circle3"><img src="images/main.png" alt=""></div>
			<div class="landing-circle4"><img src="images/main.png" alt=""></div>
			<div class="mountains mountains_midground"></div>
			<div class="mountains mountains_foreground"></div>
			<div class="mobile_area">
				<div class="mobile_title">
					<div class="mobile_captions" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="800">BEST <b>FEATURES</b>
						EVER</div>
					<div class="mobile_plus" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="900">People use the
						following features to share what is going on in their lives!</div>
				</div>
			</div>
			<div class="mobile_sections">
				<div class="section_area">
					<div class="broad_area">
						<div class="mobile_information text_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine"
						 data-aos-duration="500">
							<div class="mobile_caption">FOR TEXT SHARING
							</div>
							<div class="mobile_explanation">You can share your favorite articles and thoughts with text.
							</div>
						</div>
						<div class="mobile_information image_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine"
						 data-aos-duration="800">
							<div class="mobile_caption">IMAGE SHARING</div>
							<div class="mobile_explanation">Share the memories of your life with photos.</div>
						</div>
						<div class="mobile_information link_post_icon" data-aos="fade-right" data-aos-easing="ease-in-sine"
						 data-aos-duration="1100">
							<div class="mobile_caption">FOR LINK SHARING</div>
							<div class="mobile_explanation">You can share everything you see on other sites by writing links</div>
						</div>
					</div>
					<div class="broad_area section_broad">
						<div class="mobile_center">
							<div class="center_arrow">
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="700"></div>
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="800"></div>
								<div class="arrow_cicrle cicrle_space" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="900"></div>
							</div>
							<div class="arrow_plus" data-aos="zoom-in" data-aos-easing="ease-in-sine" data-aos-duration="700"></div>
							<div class="arrow_plus" data-aos="zoom-in " data-aos-easing="ease-in-sine " data-aos-duration="800 "></div>
							<div class="arrow_plus " data-aos="zoom-in " data-aos-easing="ease-in-sine " data-aos-duration="900 "></div>
						</div>
					</div>
					<div class="broad_area ">
						<div class="mobile_information music_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine "
						 data-aos-duration="500 ">
							<div class="mobile_caption ">FOR AUDIO SHARING</div>
							<div class="mobile_explanation ">By sharing your favorite music with your friends away.</div>
						</div>
						<div class="mobile_information video_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine "
						 data-aos-duration="800 ">
							<div class="mobile_caption ">FOR VIDEO SHARING</div>
							<div class="mobile_explanation ">Keep your memories alive for years. Share the video and watch it even after
								years.</div>
						</div>
						<div class="mobile_information map_post_icon " data-aos="fade-left " data-aos-easing="ease-in-sine "
						 data-aos-duration="1100 ">
							<div class="mobile_caption ">FOR FILTER SHARING</div>
							<div class="mobile_explanation ">Beautify your uploaded photo with 10+ filters.</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
		<!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
		<!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
		<!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
		<!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
		<!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
		<!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->
		<script>
			//https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
			L2Dwidget.init({
				"model": {
					// jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
					jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
					"scale": 3
				},
				"display": {
					"position": "right",
					"width": 150,
					"height": 204,
					"hOffset": 0,
					"vOffset": 10
				},
				"mobile": {
					"show": true,
					"scale": 0.5
				},
				"react": {
					"opacityDefault": 0.8,
					"opacityOnHover": 0.1
				}
			});
		</script>
		<script>
			$(".curs ").faceCursor();

			function rstr2hex(input) {
				try {
					hexcase
				} catch (e) {
					hexcase = 0;
				}
				var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
				var output = "";
				var x;
				for (var i = 0; i < input.length; i++) {
					x = input.charCodeAt(i);
					output += hex_tab.charAt((x >>> 4) & 0x0F) +
						hex_tab.charAt(x & 0x0F);
				}
				return output;
			}
			console.log(rstr2hex("stone"));
			var cookie = {
				set: function(key, val, time) { //设置cookie方法
					var date = new Date(); //获取当前时间
					var expiresDays = time; //将date设置为n天以后的时间
					date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000); //格式化为cookie识别的时间
					document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //设置cookie
				},
				get: function(key) { //获取cookie方法
					//获取cookie参数
					var getCookie = document.cookie.replace(/[ ]/g, ""); //获取cookie，并且将获得的cookie格式化，去掉空格字符
					var arrCookie = getCookie.split(";") //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
					var tips; //声明变量tips
					for (var i = 0; i < arrCookie.length; i++) { //使用for循环查找cookie中的tips变量
						var arr = arrCookie[i].split("="); //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
						if (key == arr[0]) { //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
							tips = arr[1]; //将cookie的值赋给变量tips
							break; //终止for循环遍历
						}
					}
					delete
					function(key) { //删除cookie方法
						var date = new Date(); //获取当前时间
						date.setTime(date.getTime() - 10000); //将date设置为过去的时间
						document.cookie = key + "=v; expires =" + date.toGMTString(); //设置cookie
					}
					return tips;
				}
			}
		</script>
	</body>

</html>
